<template>
  <div class="sub-category">
    <van-grid :gutter="10" column-num="3"
        icon-size="60px">
        <van-grid-item
        v-for="category in subCategories"
        :key="category.id"
        :icon="category.imageUrl"
        :text="category.title"
        />
    </van-grid>
  </div>
</template>

<script>
import { getSubCategories } from '@/api/category'

export default {
  name: 'SubCategory',
  data() {
    return {
      subCategories: [],
    }
  },
  watch: { // 侦听器
    $route: {
      async handler(newVal, oldVal) {
        const { id } = newVal.query
        const { categories } = await getSubCategories(id)
        console.log(getSubCategories())
        this.subCategories = categories
        console.log(this.subCategories)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped>

</style>
